<template>
    <view class="header">
        <image class="img-title" src="../../static/icon/back-btn.png" @click="navigateBack" mode="" />
        <view class="title">{{ `${stockItem.stockName} /${stockItem.stockCode}` }}</view>
    </view>
    <view class="main">
        <view class="list-item state">
            <view class="key">{{ $t('transaction.in-shareholding') }}</view>
            <image src="../../static/icon/shalou.png" class="value image" mode="" />
        </view>
        <view class="list-item orderId">
            <view class="key">{{ $t('transaction.detail.orderId') }}</view>
            <view class="value">{{ stockItem.buyOrderId }}</view>
        </view>
        <view class="list-item buyTime">
            <view class="key">{{ $t('transaction.detail.buyTime') }}</view>
            <view class="value">{{ stockItem.buyTime }}</view>
        </view>
        <view class="list-item buyPrice">
            <view class="key">{{ $t('transaction.detail.buyPrice') }}</view>
            <view class="value">{{ stockItem.buyPrice }}</view>
        </view>
        <view class="list-item num">
            <view class="key">{{ $t('transaction.detail.num') }}</view>
            <view class="value">{{ stockItem.num }}</view>
        </view>
        <view class="list-item promise-fund">
            <view class="key">{{ $t('transaction.detail.promise-fund') }}</view>
            <view class="value">{{ stockItem.promiseFund }}</view>
        </view>
        <view class="list-item lever">
            <view class="key">{{ $t('transaction.detail.lever') }}</view>
            <view class="value">{{ stockItem.lever }}</view>
        </view>
        <view class="list-item marketPrice">
            <view class="key">{{ $t('transaction.detail.marketPrice') }}</view>
            <view class="value">{{ stockItem.marketPrice }}</view>
        </view>
        <view class="list-item orderType">
            <view class="key">{{ $t('transaction.detail.orderType') }}</view>
            <view class="value">{{ $t(`transaction.detail.orderType${stockItem.orderType}`) }}</view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { requestApi } from '@/api';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { formateDate } from '@/utils/formatter';
import { Decimal } from 'decimal.js';


/*
buyOrderId: "2023021341563"
buyPrice: 42.1
lever: 2
marketPrice: 44350
nowPrice: 44.35
num: 1000
sellOrderId: null
sellPrice: null
stockCode: "1102"
stockName: "亞泥"
orderType: 0 市价 1 现价
*/
const stockItem = ref({})
onLoad(e => {
    stockItem.value = JSON.parse(e.obj)
    let { num, buyPrice, buyTime } = stockItem.value
    buyPrice = new Decimal(buyPrice)
    stockItem.value.promiseFund = buyPrice.times(num)
    stockItem.value.buyTime = formateDate(new Date(buyTime))
    console.log(stockItem.value);
})


// 返回上一层
function navigateBack() {
    let canNavBack = getCurrentPages()
    if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack()
    } else {
        history.back();
    }
}

</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-dark;
}

.header {
    width: 100%;
    height: 88rpx;
    // #ifndef H5
    margin-top: 88rpx;
    // #endif
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
        text-align: center;
        color: #fff;
        margin: 0 auto;
        padding-right: 104rpx;
        font-size: 32rpx;
    }

    .img-title {
        width: 58rpx;
        height: 58rpx;
        margin-left: 46rpx;
    }
}

.main {
    background-color: #20212A;
    width: 672rpx;
    // height: 936rpx;
    border-radius: 40rpx;
    margin: 38rpx auto 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-left: 32rpx;

    .state {
        margin-top: 43rpx;
        border-bottom: solid 2rpx $uni-bg-color-dark;
        padding-bottom: 33rpx;

        .key {
            color: #fff !important;
            font-size: 32rpx;
        }

    }

    .list-item {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        margin-bottom: 43rpx;

        .key {
            color: #7E8394;
        }

        .value {
            color: #fff;
        }

        .image {
            width: 57rpx;
            height: 57rpx;
        }
    }
}
</style>